接續昨天的內容,今天要配合 SessionHelper 來完成購物車的主要功能
需要完成購物車的模型、控制器和視圖
因為購物車資料只會存在在網站上,所以這邊建立的模型不需要在資料庫建立資料表
public class OrderItem
{
public int Id { get; set; }
public int OrderId { get; set; }
public int ProductId { get; set; } //商品ID
public int Amount { get; set; } //數量
public int SubTotal { get; set; } //小計
}
public class CartItem : OrderItem
{
public Product Product { get; set; } //商品內容
public string imageSrc { get; set; } //商品圖片
}
在 Controller資料夾
建立空控制器 CartController.cs
接著需要完成以下購物車的三個主要功能:
點擊加入購物車後會執行的Action
public IActionResult AddtoCart(int id)
{
//取得商品資料
CartItem item = new CartItem
{
Product = _context.Product.Single(x => x.Id.Equals(id)),
Amount = 1,
SubTotal = _context.Product.Single(m => m.Id == id).Price
};
//判斷 Session 內有無購物車
if (SessionHelper.
GetObjectFromJson<List<CartItem>>(HttpContext.Session, "cart") == null)
{
//如果沒有已存在購物車: 建立新的購物車
List<CartItem> cart = new List<CartItem>();
cart.Add(item);
SessionHelper.SetObjectAsJson(HttpContext.Session, "cart", cart);
}
else
{
//如果已存在購物車: 檢查有無相同的商品,有的話只調整數量
List<CartItem> cart = SessionHelper.
GetObjectFromJson<List<CartItem>>(HttpContext.Session, "cart");
int index = cart.FindIndex(m => m.Product.Id.Equals(id));
if (index != -1)
{
cart[index].Amount += item.Amount;
cart[index].SubTotal += item.SubTotal;
}
else
{
cart.Add(item);
}
SessionHelper.SetObjectAsJson(HttpContext.Session, "cart", cart);
}
return NoContent(); // HttpStatus 204: 請求成功但不更新畫面
}
public IActionResult RemoveItem(int id)
{
//向 Session 取得商品列表
List<CartItem> cart = SessionHelper.
GetObjectFromJson<List<CartItem>>(HttpContext.Session, "cart");
//用FindIndex查詢目標在List裡的位置
int index = cart.FindIndex(m => m.Product.Id.Equals(id));
cart.RemoveAt(index);
if(cart.Count < 1)
{
SessionHelper.Remove(HttpContext.Session, "cart");
}
else
{
SessionHelper.SetObjectAsJson(HttpContext.Session, "cart", cart);
}
return RedirectToAction("Index");
}
public IActionResult Index()
{
//向 Session 取得商品列表
List<CartItem> CartItems = SessionHelper.
GetObjectFromJson<List<CartItem>>(HttpContext.Session, "cart");
//計算商品總額
if(CartItems != null)
{
ViewBag.Total = CartItems.Sum(m => m.SubTotal);
}
else
{
ViewBag.Total = 0;
}
return View(CartItems);
}
最後建立前端畫面View/Cart/Index.cshtml
,隨意顯示商品的欄位,我們的購物車就大功告成了!